<template>
  <el-card class="recheck-card">
    <div class="recheck-header">
      <h2 class="recheck-title">查卷申请管理</h2>
      <div class="filter-container">
        <el-select 
          v-model="status" 
          placeholder="批阅状态" 
          class="filter-item">
          <el-option label="所有状态" value="所有状态" />
          <el-option label="待处理" value="0" />
          <el-option label="审核中" value="1" />
          <el-option label="已完成" value="2" />
          <el-option label="已驳回" value="3" />
        </el-select>
        <rip-button 
          @click="handleReset" 
          class="reset-button">
          <el-icon><RefreshLeft /></el-icon> &nbsp;重置
        </rip-button>
        <el-button 
          type="primary" 
          @click="handleQuery" 
          class="query-button">
          <el-icon><Search /></el-icon> &nbsp;查询
        </el-button>
      </div>
    </div>

    <page-list
      :tableData="recheckRequestList"
      :total="total"
      @getPage="getPage"
    >
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column label="申请教师" prop="requestTeacherName" align="center" />
      <el-table-column label="学生疑问" prop="studentQuestion" min-width="180" show-overflow-tooltip />
      <el-table-column label="教师备注" prop="teacherComment" min-width="150" show-overflow-tooltip />
      <el-table-column label="申请时间" prop="requestTime" width="170" align="center">
        <template #default="scope">
          <span class="time-text">{{ formatTime(scope.row.requestTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="info" effect="light" class="status-tag">待处理</el-tag>
          <el-tag v-if="scope.row.status === 1" type="warning" effect="light" class="status-tag">复审中</el-tag>
          <el-tag v-if="scope.row.status === 2" type="success" effect="light" class="status-tag">已完成</el-tag>
          <el-tag v-if="scope.row.status === 3" type="danger" effect="light" class="status-tag">已驳回</el-tag>
          <el-tag v-if="scope.row.status === 4" type="success" effect="light" class="status-tag">已回复</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <div class="action-buttons">
            <el-button 
              v-if="scope.row.status !== 3 && scope.row.status !== 1 && scope.row.status !== 2 && scope.row.status !== 4"
              type="primary" 
              size="small" 
              plain
              @click="openStudentPaper(scope.row)" 
              class="audit-button">
              <el-icon><Document /></el-icon>
              查卷
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              plain
              v-if="scope.row.status === 0" 
              @click="openTeacherDialog(scope.row)" 
              class="assign-button">
              <el-icon><User /></el-icon>
              分配教师
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              plain
              v-if="scope.row.status === 3" 
              @click="getRejectReasonOfHook(scope.row)" 
              class="assign-button">
              查看原因
            </el-button>  

            <el-button 
              type="primary" 
              size="small" 
              plain
              v-if="scope.row.status === 2" 
              @click="getRecheckResultOfHook(scope.row)" 
              class="assign-button">
              回复结果
            </el-button> 
              
          </div>
        </template>
      </el-table-column>
    </page-list>
  </el-card>

  <!-- 学生试卷详情 -->
  <el-dialog
   v-model="studentPaperDialogVisible" 
   title="学生试卷详情" 
   width="60%"
   :destroy-on-close="true"
   :close-on-click-modal="false"
   class="student-paper-dialog"
   >
    <div class="paper-content">
      <el-card class="info-card exam-info" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><Reading /></el-icon>
            <span>考试信息</span>
          </div>
        </template>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">考试名称：</span>
            <span class="info-value">{{ studentPaperResult.examinationData.name }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">满分：</span>
            <span class="info-value highlight">{{ studentPaperResult.examinationData.paperFullMark }}</span>
          </div>
        </div>
      </el-card>

      <el-card class="info-card student-info" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><User /></el-icon>
            <span>学生信息</span>
          </div>
        </template>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">姓名：</span>
            <span class="info-value">{{ studentPaperResult.studentData.name }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">学号：</span>
            <span class="info-value">{{ studentPaperResult.studentData.account }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">班级：</span>
            <span class="info-value">{{ studentPaperResult.studentData.classesName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">所得分数：</span>
            <span class="info-value score">{{ studentPaperResult.studentData.totalScore }}</span>
          </div>
        </div>
      </el-card>

      <el-card class="details-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <span>批改详情</span>
          </div>
        </template>
        
        <!-- 客观题部分 -->
        <div class="section">
          <div class="section-header">
            <el-icon><Collection /></el-icon>
            <span>客观题</span>
          </div>
          
          <el-collapse accordion class="questions-collapse">
            <el-collapse-item v-for="(item, index) in studentPaperResult.subjective" :key="index">
              <template #title>
                <div class="question-title">
                  <span class="question-order">{{ item.questionOrder }}.</span>
                  <span class="question-name">{{ item.questionName }}</span>
                  <span class="question-score">({{ item.score }}分)</span>
                </div>
              </template>
              
              <div class="question-content">
                <div class="content-section" v-for="(value, key) in item.questionContent" :key="key">
                  <span class="content-label">{{ key }}：</span>
                  <span class="content-value">{{ value }}</span>
                </div>
                
                <div class="answer-section">
                  <div class="answer-item">
                    <span class="answer-label">标准答案：</span>
                    <span class="answer-value correct">{{ item.questionAnswer }}</span>
                  </div>
                  <div class="answer-item">
                    <span class="answer-label">学生答案：</span>
                    <span class="answer-value" :class="{'correct': item.studentAnswer === item.questionAnswer, 'wrong': item.studentAnswer !== item.questionAnswer}">
                      {{ item.studentAnswer }}
                    </span>
                  </div>
                  <div class="answer-item">
                    <span class="answer-label">得分：</span>
                    <span class="answer-value score">{{ item.finalScore }}</span>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        
        <!-- 主观题部分 -->
        <div class="section">
          <div class="section-header">
            <el-icon><EditPen /></el-icon>
            <span>主观题</span>
          </div>
          
          <el-collapse accordion class="questions-collapse">
            <el-collapse-item v-for="(item, index) in studentPaperResult.objective" :key="index">
              <template #title>
                <div class="question-title">
                  <span class="question-order">{{ item.questionOrder }}.</span>
                  <span class="question-name">{{ item.questionName }}</span>
                  <span class="question-score">({{ item.score }}分)</span>
                </div>
              </template>
              
              <div class="question-content">
                <div class="content-section">
                  <span class="content-label">问题描述：</span>
                  <div class="content-value">{{ item.questionContent }}</div>
                </div>
                
                <div class="answer-section">
                  <div class="answer-item full-width">
                    <span class="answer-label">学生答案：</span>
                    <div class="answer-value student-answer">{{ item.studentAnswer }}</div>
                  </div>
                  
                  <div class="answer-item full-width">
                    <span class="answer-label">参考答案：</span>
                    <div class="answer-value reference-answer">{{ item.referenceAnswer }}</div>
                  </div>
                  
                  <div class="answer-item full-width">
                    <span class="answer-label">教师批改详情：</span>
                    <div class="answer-value teacher-comment">{{ item.checkDerail }}</div>
                  </div>
                  
                  <div class="answer-item">
                    <span class="answer-label">最终得分：</span>
                    <span class="answer-value score">{{ item.finalScore }}</span>
                  </div>
                  
                  <div class="answer-item">
                    <span class="answer-label">批改人：</span>
                    <span class="answer-value">{{ item.userName }}</span>
                  </div>
                </div>
                
                <div class="grading-rules">
                  <div class="rules-title">评分细则：</div>
                  <div class="rules-list">
                    <div class="rule-item" v-for="(rule, ruleIndex) in item.gradingRules" :key="ruleIndex">
                      <el-icon><Check /></el-icon>
                      <span>{{ rule }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>

     
      </el-card>
    </div>
    <template #footer>
       <el-button type="danger"  @click="openRejectDialog()">驳回</el-button>
       <el-button type="primary" plain @click="studentPaperDialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>

  <!-- 驳回的对话框 -->
  <el-dialog
    v-model="rejectDialogVisible"
    title="驳回申请"
    width="30%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    class="reject-dialog"
  >
    <div class="reject-content">
      <div class="reject-icon">
        <el-icon><WarningFilled /></el-icon>
      </div>
      <div class="reject-message">
        <p>确定要驳回此查卷申请吗？</p>
        <p class="reject-tip">请填写驳回原因，以便申请人了解情况</p>
      </div>
      <div class="reject-form">
        <div class="form-label">
          <span class="required">*</span>驳回原因:
        </div>
        <el-input 
          v-model="rejectReason" 
          type="textarea" 
          :rows="4" 
          placeholder="请输入详细的驳回原因..." 
          maxlength="200"
          show-word-limit
          class="reject-input"
        />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="rejectDialogVisible = false" plain class="cancel-button">
          取消
        </el-button>
        <el-button type="danger" @click="handleReject()" class="confirm-button">
          <el-icon><CircleCloseFilled /></el-icon>
          确认驳回
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 查看驳回原因 -->
  <el-dialog
    v-model="rejectReasonDialogVisible"
    title="驳回原因"
    width="30%"
    :destroy-on-close="true"  
    :close-on-click-modal="false"
    class="reject-reason-dialog"
  >
    <div class="reason-content">
      <div class="reason-icon">
        <el-icon><InfoFilled /></el-icon>
      </div>
      <div class="reason-title">申请被驳回</div>
      <div class="reason-card">
        <div class="reason-header">
          <el-icon><ChatDotRound /></el-icon>
          <span>驳回说明</span>
        </div>
        <div class="reason-body">
          {{ rejectReason || '暂无详细说明' }}
        </div>
      </div>
   
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="rejectReasonDialogVisible = false" plain class="close-button">
          我知道了
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 分配教师对话框 -->
  <el-dialog
    v-model="teacherDialogVisible"
    title="分配教师"
    :width="dialogWidth"
    :destroy-on-close="true"  
    :close-on-click-modal="false"
    class="teacher-assignment-dialog"
    >
    
    <div class="dialog-header-content">
      <el-alert
        v-if="subjectTeachers && subjectTeachers.length === 0 && showValidationAlert"
        title="请添加至少一名批阅教师"
        type="warning"
        description="请从左侧教师列表中选择合适的批阅教师"
        show-icon
        :closable="true"
        @close="showValidationAlert = false"
        class="validation-alert"
      />
      <div class="dialog-description">
        <el-icon><InfoFilled /></el-icon>
        <span>请为此查卷申请分配合适的教师，以便进行专业审核</span>
      </div>
    </div>

    <div class="reviewers-container">
      <div class="selection-panel">
        <div class="panel-header">
          <el-icon><UserFilled /></el-icon>
          <h3>可选教师列表</h3>
          <div class="panel-counter">{{ subjectTeachers ? subjectTeachers.length : 0 }}人</div>
        </div>
        <div class="panel-content">
          <el-input
            v-model="teacherSearchKeyword"
            placeholder="搜索教师姓名/工号"
            prefix-icon="Search"
            clearable
            class="search-input"
            @input="filterTeachers"
          />
          <el-table
            :data="filteredTeachers || []"
            height="320"
            border
            @selection-change="handleSelectionChange"
            class="teachers-table"
            :highlight-current-row="true"
            empty-text="暂无教师"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="account" label="工号" width="120" align="center" />
            <el-table-column prop="name" label="姓名" min-width="120" align="center"/>
          
          </el-table>
        </div>
      </div>

      <div class="control-buttons">
        <div class="action-tips">选择教师</div>
        <el-button 
          type="primary" 
          @click="addSelectedTeachers" 
          :disabled="!tempSelectedTeachers || tempSelectedTeachers.length === 0"
          class="control-button"
          round
        >
          <el-icon><ArrowRight /></el-icon>
        </el-button>
        <el-button 
          type="danger" 
          @click="removeSelectedTeachers"
          :disabled="!tempRemovedTeachers || tempRemovedTeachers.length === 0"
          class="control-button"
          round
        >
          <el-icon><ArrowLeft /></el-icon>
        </el-button>
        <div class="action-tips">移除教师</div>
      </div>

      <div class="selection-panel">
        <div class="panel-header assigned">
          <el-icon><Check /></el-icon>
          <h3>已选批阅教师</h3>
          <div class="panel-counter">{{ selectedTeachers ? selectedTeachers.length : 0 }}人</div>
        </div>
        <div class="panel-content">
          <el-empty 
            v-if="!selectedTeachers || selectedTeachers.length === 0" 
            description="请从左侧选择教师"
            class="empty-placeholder"
            :image-size="100"
          >
            <template #image>
              <el-icon class="empty-icon"><UserFilled /></el-icon>
            </template>
          </el-empty>
          <el-table
            v-else
            :data="selectedTeachers"
            height="320"
            border
            @selection-change="handleSelectedTeachersChange"
            class="reviewers-table"
            :highlight-current-row="true"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="account" label="工号" width="120" align="center" />
            <el-table-column prop="name" label="姓名" min-width="120" align="center"/>
              
          </el-table>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="teacherDialogVisible = false" plain class="cancel-button">
          取消
        </el-button>
        <el-button 
          type="primary" 
          @click="handleTeacherAssignment" 
          :disabled="!selectedTeachers || selectedTeachers.length === 0"
          class="confirm-button"
        >
          <el-icon><Check /></el-icon>
          确认分配
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 查看复审结果 -->
  <el-dialog
    v-model="recheckResultDialogVisible"
    title="复审结果"
    width="40%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    class="recheck-result-dialog">
    <div class="result-content">
      <div class="result-header">
        <div class="result-icon">
          <el-icon><CircleCheckFilled /></el-icon>
        </div>
        <h2 class="result-title">成绩复审信息</h2>
      </div>
      
      <div class="score-cards">
        <div class="score-card original">
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <span>原始分数</span>
          </div>
          <div class="score-value">{{ recheckResult.originalScore }}</div>
        </div>
        
        <div class="score-card final">
          <div class="card-header">
            <el-icon><EditPen /></el-icon>
            <span>复审分数</span>
          </div>
          <div class="score-value">{{ recheckResult.finalScore }}</div>
          <div v-if="recheckResult.finalScore !== recheckResult.originalScore" class="score-diff" 
            :class="{'score-up': recheckResult.finalScore > recheckResult.originalScore, 
                    'score-down': recheckResult.finalScore < recheckResult.originalScore}">
            <el-icon v-if="recheckResult.finalScore > recheckResult.originalScore"><ArrowUp /></el-icon>
            <el-icon v-else><ArrowDown /></el-icon>
            <span>变化 {{ Math.abs(recheckResult.finalScore - recheckResult.originalScore) }} 分</span>
          </div>
        </div>
      </div>
      
      <div class="summary-section">
        <div class="summary-header">
          <el-icon><ChatDotRound /></el-icon>
          <span>复审总结</span>
        </div>
        <el-input 
          v-model="resultSummary" 
          type="textarea" 
          :rows="4" 
          placeholder="请输入复审总结，说明分数调整的原因..." 
          maxlength="200"
          show-word-limit
          class="summary-input" />
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="recheckResultDialogVisible = false" plain class="cancel-button">
          取消
        </el-button>
        <el-button type="primary" @click="recoverRecheckResultOfHook()" class="confirm-button">
          <el-icon><Check /></el-icon>
          确认提交
        </el-button>
      </div>
    </template>
  </el-dialog>

    
</template>

<script setup>
import { useRecheck } from '@/hooks/server/useRecheckRequestManage'
import { onMounted, ref, onUnmounted } from 'vue'
import { Search, RefreshLeft, Document, User, UserFilled, Reading, EditPen, Collection, Check, WarningFilled, CircleCloseFilled, InfoFilled, ChatDotRound, Warning, ArrowRight, ArrowLeft, CircleCheckFilled, ArrowUp, ArrowDown } from '@element-plus/icons-vue'

const { 
  recheckRequestList,
  total,
  page,
  pageSize,
  status,
  getRecheckRequestListOfHook,

  studentPaperDialogVisible,
  studentPaperResult,
  openStudentPaper,

  rejectDialogVisible,
  openRejectDialog,

  rejectReason,
  handleReject,

  rejectReasonDialogVisible,
  getRejectReasonOfHook,

  // 分配教师对话框
  teacherDialogVisible,
  // 获取教师列表
  subjectTeachers,
  selectedTeachers,
  filteredTeachers,
  openTeacherDialog,
  
  // 分配教师相关变量
  showValidationAlert = ref(false),
  handleTeacherAssignment,

  // 查看复审结果
  recheckResultDialogVisible,
  recheckResult,
  getRecheckResultOfHook,

  // 复审总结
  resultSummary,
  recoverRecheckResultOfHook
} = useRecheck()

// 教师搜索关键词
const teacherSearchKeyword = ref('');

// 临时选中的教师（左侧表格）
const tempSelectedTeachers = ref([]);

// 临时选中的已分配教师（右侧表格）
const tempRemovedTeachers = ref([]);

// 响应式对话框宽度
const dialogWidth = ref('70%');

// 监听窗口大小变化
const updateDialogWidth = () => {
  const windowWidth = window.innerWidth;
  if (windowWidth < 768) {
    dialogWidth.value = '95%';
  } else if (windowWidth < 992) {
    dialogWidth.value = '85%';
  } else if (windowWidth < 1200) {
    dialogWidth.value = '75%';
  } else {
    dialogWidth.value = '70%';
  }
};

// 添加窗口大小变化监听
onMounted(() => {
  getRecheckRequestListOfHook();
  if (subjectTeachers) {
    filteredTeachers.value = subjectTeachers.value;
  }
  
  // 初始化对话框宽度
  updateDialogWidth();
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', updateDialogWidth);
});

// 移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateDialogWidth);
});

// 过滤教师列表
const filterTeachers = () => {
  if (!subjectTeachers) return;
  
  if (!teacherSearchKeyword.value) {
    filteredTeachers.value = subjectTeachers.value;
    return;
  }
  
  const keyword = teacherSearchKeyword.value.toLowerCase();
  filteredTeachers.value = subjectTeachers.value.filter(teacher => {
    return teacher.name.toLowerCase().includes(keyword) || 
           teacher.account.toLowerCase().includes(keyword);
  });
};

// 处理左侧表格选择变化
const handleSelectionChange = (selection) => {
  tempSelectedTeachers.value = selection;
};

// 处理右侧表格选择变化
const handleSelectedTeachersChange = (selection) => {
  tempRemovedTeachers.value = selection;
};

// 添加选中的教师到右侧
const addSelectedTeachers = () => {
  if (!tempSelectedTeachers.value.length) return;
  
  // 过滤掉已经存在于selectedTeachers的教师
  const uniqueTeachers = tempSelectedTeachers.value.filter(teacher => {
    return !selectedTeachers.value.some(selected => selected.id === teacher.id);
  });

  console.log('uniqueTeachers:',uniqueTeachers);
  
  if (uniqueTeachers.length) {
    // 添加到已选教师列表
    if (!selectedTeachers.value) {
      selectedTeachers = ref([...uniqueTeachers]);
    } else {
      selectedTeachers.value.push(...uniqueTeachers);
    }
    
    // 从左侧可选教师列表中移除已选择的教师
    if (subjectTeachers && subjectTeachers.value) {
      // 获取所有已选教师的ID
      const selectedIds = uniqueTeachers.map(teacher => teacher.id);
      
      // 更新subjectTeachers，移除已选择的教师
      subjectTeachers.value = subjectTeachers.value.filter(teacher => 
        !selectedIds.includes(teacher.id)
      );
      
      // 同时更新过滤后的教师列表
      filterTeachers();
    }
  }
  
  // 清空临时选择
  tempSelectedTeachers.value = [];
};

// 从右侧移除选中的教师
const removeSelectedTeachers = () => {
  if (!tempRemovedTeachers.value.length || !selectedTeachers) return;
  
  // 获取要移除的教师
  const teachersToRemove = tempRemovedTeachers.value;
  
  // 从已选教师列表中移除
  const teacherIds = teachersToRemove.map(teacher => teacher.id);
  selectedTeachers.value = selectedTeachers.value.filter(teacher => !teacherIds.includes(teacher.id));
  
  // 将移除的教师添加回左侧可选教师列表
  if (subjectTeachers && subjectTeachers.value) {
    // 筛选出不在subjectTeachers中的教师
    const teachersToAdd = teachersToRemove.filter(teacher => 
      !subjectTeachers.value.some(t => t.id === teacher.id)
    );
    
    if (teachersToAdd.length > 0) {
      // 添加回左侧列表
      subjectTeachers.value = [...subjectTeachers.value, ...teachersToAdd];
      
      // 更新过滤后的教师列表
      filterTeachers();
    }
  }
  
  // 清空临时选择
  tempRemovedTeachers.value = [];
};

const getPage = (pageParams) => {
  page.value = pageParams.page
  pageSize.value = pageParams.pageSize
  getRecheckRequestListOfHook()
}

const handleReset = () => {
  status.value = '所有状态'
  getRecheckRequestListOfHook()
}

const handleQuery = async () => {
  await getRecheckRequestListOfHook()
  if(recheckRequestList.value.length > 0) { 
    ElMessage.success('查询成功') 
  } else {
    ElMessage.warning('暂无数据')
  }
}

// 格式化时间的方法
const formatTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

</script>

<style scoped lang="scss">
.recheck-card {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin: 20px;
  transition: all 0.3s;
  
  &:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
}

.recheck-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.recheck-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #303133;
  margin: 0;
  position: relative;
  padding-left: 12px;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: #409EFF;
    border-radius: 2px;
  }
}

.filter-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-item {
  width: 140px;
  transition: all 0.3s;
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.reset-button {
  width: 95px;
  height: 33px;
  font-weight: 500;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .el-icon {
    margin-right: 4px;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.query-button {
  font-weight: 500;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  padding: 9px 16px;
  
  .el-icon {
    margin-right: 4px;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.recheck-table {
  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    
    th {
      background-color: #f8f9fa !important;
      font-weight: 600;
      color: #606266;
      padding: 12px 0;
    }
    
    .el-table__row {
      transition: all 0.2s;
      
      &:hover {
        background-color: #f0f7ff !important;
      }
    }
  }
}

.status-tag {
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.3s;
  
  &:hover {
    transform: scale(1.05);
  }
}

.time-text {
  color: #606266;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  
  .audit-button, .assign-button {
    padding: 6px 10px;
    font-weight: 500;
    transition: all 0.3s;
    font-size: 0.85rem;
    
    .el-icon {
      margin-right: 2px;
    }
    
    &:hover {
     
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
}

@media (max-width: 768px) {
  .recheck-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .filter-container {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .filter-item {
    width: 100%;
  }
}

/* 学生试卷详情对话框样式 */
.student-paper-dialog {
  :deep(.el-dialog__header) {
    padding: 20px;
    margin-right: 0;
    border-bottom: 1px solid #f0f0f0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: #409EFF;
        border-radius: 2px;
      }
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  .paper-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .info-card {
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-3px);
    }
    
    .card-header {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      
      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }
    
    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }
    
    .info-item {
      display: flex;
      align-items: center;
      
      .info-label {
        font-weight: 600;
        color: #606266;
        min-width: 80px;
      }
      
      .info-value {
        color: #303133;

        &.highlight {
          font-weight: 600;
          color: #409EFF;
        }
        
        &.score {
          font-weight: 600;
          color: #f56c6c;
        }
      }
    }
  }
  
  .exam-info {
    :deep(.el-card__header) {
      background-color: #ecf5ff;
      
      .el-icon {
        color: #409EFF;
      }
    }
  }
  
  .student-info {
    :deep(.el-card__header) {
      background-color: #f0f9eb;
      
      .el-icon {
        color: #67c23a;
      }
    }
  }
  
  .details-card {
    :deep(.el-card__header) {
      background-color: #fdf6ec;
      
      .el-icon {
        color: #e6a23c;
      }
    }
    
    .section {
      margin-bottom: 24px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .section-header {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #dcdfe6;
      
      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }
    
    .questions-collapse {
      border: none;
      
      :deep(.el-collapse-item__header) {
        padding: 12px 16px;
        border-radius: 4px;
        background-color: #f8f9fa;
        border: none;
        margin-bottom: 8px;
        transition: all 0.3s;
        
        &:hover {
          background-color: #f0f7ff;
        }
        
        &.is-active {
          background-color: #ecf5ff;
        }
      }
      
      :deep(.el-collapse-item__wrap) {
        border: none;
        background-color: transparent;
      }
      
      :deep(.el-collapse-item__content) {
        padding: 16px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 16px;
      }
    }
    
    .question-title {
      display: flex;
      align-items: center;
      
      .question-order {
        font-weight: 600;
        color: #409EFF;
        margin-right: 8px;
      }
      
      .question-name {
        font-weight: 600;
        color: #303133;
      }
      
      .question-score {
        margin-left: 8px;
        color: #f56c6c;
      }
    }
    
    .question-content {
      .content-section {
        margin-bottom: 16px;
        
        .content-label {
          font-weight: 600;
          color: #606266;
          margin-right: 8px;
        }
        
        .content-value {
          color: #303133;
        }
      }
      
      .answer-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 16px;
        
        .answer-item {
          display: flex;
          flex-direction: column;
          
          &.full-width {
            grid-column: 1 / -1;
          }
          
          .answer-label {
            font-weight: 600;
            color: #606266;
            margin-bottom: 8px;
          }
          
          .answer-value {
            color: #303133;
            
            &.score {
              font-weight: 600;
              color: #f56c6c;
            }
            
            &.correct {
              color: #67c23a;
            }
            
            &.wrong {
              color: #f56c6c;
            }
            
            &.student-answer, &.reference-answer, &.teacher-comment {
              padding: 12px;
              background-color: #f8f9fa;
              border-radius: 4px;
              white-space: pre-wrap;
              line-height: 1.6;
            }
            
            &.student-answer {
              background-color: #ecf5ff;
            }
            
            &.reference-answer {
              background-color: #f0f9eb;
            }
            
            &.teacher-comment {
              background-color: #fdf6ec;
            }
          }
        }
      }
      
      .grading-rules {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px dashed #dcdfe6;
        
        .rules-title {
          font-weight: 600;
          color: #606266;
          margin-bottom: 8px;
        }
        
        .rules-list {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        
        .rule-item {
          display: flex;
          align-items: flex-start;
          padding: 8px 12px;
          background-color: #f8f9fa;
          border-radius: 4px;
          
          .el-icon {
            color: #67c23a;
            margin-right: 8px;
            margin-top: 3px;
          }
        }
      }
    }
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .student-paper-dialog {
    .info-card .info-grid {
      grid-template-columns: 1fr;
    }
    
    .details-card .answer-section {
      grid-template-columns: 1fr;
    }
  }
}

/* 驳回对话框样式 */
.reject-dialog {
  :deep(.el-dialog__header) {
    padding: 20px;
    margin-right: 0;
    border-bottom: 1px solid #f0f0f0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: #f56c6c;
        border-radius: 2px;
      }
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 30px 20px;
  }
  
  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
  }
  
  .reject-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .reject-icon {
    margin-bottom: 20px;
    
    .el-icon {
      font-size: 48px;
      color: #f56c6c;
      animation: pulse 1.5s infinite ease-in-out;
    }
  }
  
  .reject-message {
    text-align: center;
    margin-bottom: 20px;
    
    p {
      margin: 0;
      line-height: 1.6;
      color: #303133;
      font-size: 16px;
      font-weight: 500;
    }
    
    .reject-tip {
      font-size: 14px;
      color: #909399;
      margin-top: 8px;
    }
  }
  
  .reject-form {
    width: 100%;
    
    .form-label {
      font-weight: 600;
      color: #303133;
      margin-bottom: 8px;
      font-size: 15px;
      
      .required {
        color: #f56c6c;
        margin-right: 4px;
      }
    }
    
    .reject-input {
      :deep(.el-textarea__inner) {
        border-radius: 4px;
        padding: 12px;
        font-size: 14px;
        transition: all 0.3s;
        line-height: 1.6;
        border-color: #f0f0f0;
        
        &:focus {
          border-color: #f56c6c;
          box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
        }
        
        &::placeholder {
          color: #c0c4cc;
        }
      }
      
      :deep(.el-input__count) {
        color: #909399;
        background: none;
        font-size: 12px;
      }
    }
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    
    .cancel-button, .confirm-button {
      padding: 10px 20px;
      font-weight: 500;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
    
    .confirm-button {
      background-color: #f56c6c;
      border-color: #f56c6c;
      
      .el-icon {
        margin-right: 4px;
      }
      
      &:hover {
        background-color: #f78989;
        border-color: #f78989;
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 查看驳回原因对话框样式 */
.reject-reason-dialog {
  :deep(.el-dialog__header) {
    padding: 20px;
    margin-right: 0;
    border-bottom: 1px solid #f0f0f0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: #e6a23c;
        border-radius: 2px;
      }
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 30px 20px;
  }
  
  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
  }
  
  .reason-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .reason-icon {
    margin-bottom: 16px;
    
    .el-icon {
      font-size: 48px;
      color: #e6a23c;
    }
  }
  
  .reason-title {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 20px;
  }
  
  .reason-card {
    width: 100%;
    background-color: #fdf6ec;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    
    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    }
    
    .reason-header {
      padding: 12px 16px;
      background-color: #e6a23c;
      color: #fff;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 8px;
      }
    }
    
    .reason-body {
      padding: 16px;
      color: #303133;
      line-height: 1.8;
      min-height: 100px;
      font-size: 15px;
      white-space: pre-wrap;
      word-break: break-all;
    }
  }
  
  .reason-tips {
    display: flex;
    align-items: center;
    color: #909399;
    font-size: 14px;
    
    .el-icon {
      margin-right: 6px;
      color: #e6a23c;
    }
  }
  
  .dialog-footer {
    display: flex;
    justify-content: center;
    
    .close-button {
      padding: 10px 24px;
      font-weight: 500;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
  }
}

/* 分配教师对话框样式 */
.teacher-assignment-dialog {
  :deep(.el-dialog) {
    max-width: 1400px;
    
    @media (max-width: 1200px) {
      max-width: 1100px;
    }
    
    @media (max-width: 992px) {
      max-width: 900px;
      margin: 0 15px;
    }
    
    @media (max-width: 768px) {
      width: 95% !important;
      margin: 0 auto;
    }
  }
  
  :deep(.el-dialog__header) {
    padding: 20px;
    margin-right: 0;
    border-bottom: 1px solid #f0f0f0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: #409EFF;
        border-radius: 2px;
      }
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 20px 30px;
    
    @media (max-width: 992px) {
      padding: 15px 20px;
    }
    
    @media (max-width: 768px) {
      padding: 10px 15px;
    }
  }

  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
    
    @media (max-width: 768px) {
      padding: 10px 15px;
    }
  }

  .dialog-header-content {
    margin-bottom: 20px;
    
    @media (max-width: 768px) {
      margin-bottom: 15px;
    }
    
    .validation-alert {
      margin-bottom: 15px;
    }
    
    .dialog-description {
      display: flex;
      align-items: center;
      background-color: #f0f7ff;
      padding: 12px 15px;
      border-radius: 6px;
      color: #409EFF;
      font-size: 14px;
      
      @media (max-width: 768px) {
        padding: 10px;
        font-size: 13px;
      }
      
      .el-icon {
        font-size: 16px;
        margin-right: 8px;
      }
    }
  }

  :deep(.el-table) {
    border-radius: 4px;
    overflow: hidden;
    
    th {
      background-color: #f5f7fa !important;
      font-weight: 600;
      font-size: 13px;
      color: #606266;
      padding: 8px 0;
      
      @media (max-width: 768px) {
        padding: 6px 0;
        font-size: 12px;
      }
    }
    
    td {
      padding: 8px 0;
      font-size: 13px;
      
      @media (max-width: 768px) {
        padding: 6px 0;
        font-size: 12px;
      }
    }
    
    .el-table__row {
      transition: all 0.2s;
      
      &:hover {
        background-color: #f0f7ff !important;
      }
      
      &.current-row {
        background-color: #ecf5ff !important;
      }
    }
  }
}

.reviewers-container {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  
  @media (max-width: 1200px) {
    gap: 15px;
  }
  
  @media (max-width: 992px) {
    flex-direction: column;
    align-items: stretch;
  }
  
  .selection-panel {
    flex: 1;
    min-width: 320px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    
    @media (max-width: 1200px) {
      min-width: 280px;
    }
    
    @media (max-width: 992px) {
      width: 100%;
      min-width: auto;
    }
    
    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    }
    
    .panel-header {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      background-color: #ecf5ff;
      
      @media (max-width: 768px) {
        padding: 10px;
      }
      
      .el-icon {
        font-size: 18px;
        color: #409EFF;
        margin-right: 8px;
      }
      
      h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: #303133;
        flex: 1;
        
        @media (max-width: 768px) {
          font-size: 14px;
        }
      }
      
      .panel-counter {
        background-color: #409EFF;
        color: white;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 10px;
        font-weight: 500;
      }
      
      &.assigned {
        background-color: #f0f9eb;
        
        .el-icon {
          color: #67c23a;
        }
        
        .panel-counter {
          background-color: #67c23a;
        }
      }
    }
    
    .panel-content {
      padding: 12px;
      
      @media (max-width: 768px) {
        padding: 8px;
      }
      
      .search-input {
        margin-bottom: 10px;
        
        @media (max-width: 768px) {
          margin-bottom: 8px;
        }
        
        :deep(.el-input__inner) {
          border-radius: 20px;
          font-size: 13px;
        }
      }
      
      .empty-placeholder {
        margin: 30px 0;
        
        .empty-icon {
          font-size: 60px;
          color: #dcdfe6;
        }
      }
    }
  }
  
  .control-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    gap: 15px;
    min-width: 180px;
    background-color: #f7f9fc;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    @media (max-width: 1200px) {
      min-width: 160px;
      padding: 8px 12px;
    }
    
    @media (max-width: 992px) {
      flex-direction: row;
      width: 100%;
      margin: 10px 0;
    }
    
    @media (max-width: 768px) {
      gap: 10px;
      padding: 8px;
    }
    
    .control-button {
      width: 40px;
      height: 40px;
      padding: 0;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      border-radius: 50%;
      
      @media (max-width: 768px) {
        width: 36px;
        height: 36px;
        font-size: 16px;
      }
      
      &:hover:not(:disabled) {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }
    
    .action-tips {
      font-size: 13px;
      color: #606266;
      max-width: 60px;
      text-align: center;
      line-height: 1.4;
      font-weight: 500;
      
      @media (max-width: 768px) {
        font-size: 12px;
        max-width: 50px;
      }
    }
  }
}

.teacher-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  .teacher-avatar {
    background-color: #409EFF;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  
  @media (max-width: 768px) {
    gap: 8px;
  }
  
  .cancel-button, .confirm-button {
    padding: 9px 20px;
    font-weight: 500;
    transition: all 0.3s;
    
    @media (max-width: 768px) {
      padding: 8px 15px;
      font-size: 13px;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
  
  .confirm-button {
    .el-icon {
      margin-right: 4px;
    }
  }
}

/* 复审结果对话框样式 */
.recheck-result-dialog {
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: linear-gradient(to bottom, #409EFF, #64B5F6);
        border-radius: 2px;
      }
    }
  }
  
  .el-dialog__body {
    padding: 30px;
  }
  
  .result-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  .result-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .result-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #ecf5ff, #d1e9ff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    
    .el-icon {
      font-size: 36px;
      color: #409EFF;
    }
  }
  
  .result-title {
    font-size: 22px;
    font-weight: 600;
    color: #303133;
    margin: 0;
    text-align: center;
  }
  
  .score-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 10px;
  }
  
  .score-card {
    background-color: #f9fafc;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    
  
    
    &.original {
      border-top: 4px solid #909399;
      
      .card-header {
        color: #606266;
        
        .el-icon {
          background-color: rgba(144, 147, 153, 0.1);
          color: #909399;
        }
      }
      
      .score-value {
        color: #606266;
      }
    }
    
    &.final {
      border-top: 4px solid #409EFF;
      
      .card-header {
        color: #409EFF;
        
        .el-icon {
          background-color: rgba(64, 158, 255, 0.1);
          color: #409EFF;
        }
      }
      
      .score-value {
        color: #409EFF;
      }
    }
  }
  
  .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    
    .el-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    
    span {
      font-size: 16px;
      font-weight: 600;
    }
  }
  
  .score-value {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin: 10px 0;
  }
  
  .score-diff {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 10px;
    
    &.score-up {
      background-color: rgba(103, 194, 58, 0.1);
      color: #67c23a;
      
      .el-icon {
        color: #67c23a;
      }
    }
    
    &.score-down {
      background-color: rgba(245, 108, 108, 0.1);
      color: #f56c6c;
      
      .el-icon {
        color: #f56c6c;
      }
    }
  }
  
  .summary-section {
    background-color: #f9fafc;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  .summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    
    .el-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background-color: rgba(64, 158, 255, 0.1);
      color: #409EFF;
    }
    
    span {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .summary-input {
    width: 100%;
    
    .el-textarea__inner {
      border-radius: 8px;
      padding: 12px;
      font-size: 14px;
      line-height: 1.6;
      border-color: #e4e7ed;
      transition: all 0.3s;
      
      &:focus {
        border-color: #409EFF;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
      }
      
      &::placeholder {
        color: #909399;
      }
    }
  }
  
  .dialog-footer {
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    
    .cancel-button {
      padding: 9px 20px;
      
      &:hover {
        color: #409EFF;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
      }
    }
    
    .confirm-button {
      padding: 9px 20px;
      display: flex;
      align-items: center;
      gap: 5px;
      background: linear-gradient(to right, #409EFF, #64B5F6);
      border-color: transparent;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
  }
  
  @media (max-width: 768px) {
    width: 90% !important;
    
    .el-dialog__body {
      padding: 20px;
    }
    
    .score-cards {
      grid-template-columns: 1fr;
    }
    
    .score-card {
      margin-bottom: 16px;
    }
  }
}
</style>  
